 <template>
 <!--分页 begin-->
 <div style="padding:10px 20px;" class="overflowY">
   <div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;">
     <!--往paging组件传值 父组件-->
     <paging :size-change="handleSizeChange"
             :current-change="handleCurrentChange"
             :page-sizes="pageSizes"
             :page-num="pageNum"
             :total-num="totalNum">
     </paging>
   </div>
   <base-card title="说明">
      <code>
        <span style="width: 100%;display: inline-block;">1、size-change - pageSize 改变时会触发(回调参数，每页条数) Function</span>
        <span style="width: 100%;display: inline-block;">2、current-change - currentPage 改变时会触发(回调参数，当前页) Function</span>
        <span style="width: 100%;display: inline-block;">3、page-sizes - 每页显示个数选择器的选项设置 Number</span>
        <span style="width: 100%;display: inline-block;">4、size-change - 每页显示条目个数 Number</span>
        <span style="width: 100%;display: inline-block;">5、total-num - 总条目数 Number</span>
        <span style="width: 100%;display: inline-block;">6、插件调用需要传入5个参数，size-change current-change类型为Function   page-sizes page-num total-num类型为Number</span>
        <span style="width: 100%;display: inline-block;">7、最外层 div 上的margin、padding控制div的外边距和内边距，四个值分别为上、右、下、左</span></code>
   </base-card>
   <base-card title="HTML">
     <pre><code>   &lt;div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;"&gt;<br>     &lt;paging :size-change="handleSizeChange"<br>             :current-change="handleCurrentChange"<br>             :page-sizes="pageSizes"<br>             :page-num="pageNum"<br>             :total-num="totalNum"&gt;<br>     &lt;/paging&gt;<br>   &lt;/div&gt;</code></pre>
   </base-card>
   <base-card title="JS">
     <pre><code>import paging from @/components/demoAssembly/paging' // 分页<br>export default {<br>  components: {<br>    paging<br>  }<br>}</code></pre>
   </base-card>
 </div>
 <!--分页 end-->
</template>

<script>
import paging from '@/components/demoAssembly/paging' // 分页
import BaseCard from '@/components/BaseCard/BaseCard'
export default {
  components: {
    paging,
    BaseCard
  },
  data() {
    return {
      pageSizes: [10, 20, 30, 40],
      pageNum: 10,
      totalNum: 50,
      handleSizeChange(row) {
      },
      handleCurrentChange(row) {
      }
    }
  }
}
</script>

